<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户下拉菜单动画</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Arial', sans-serif;
      background: #f5f5f5;
    }
    
    /* SPA布局样式 */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      z-index: 100;
    }
    
    /* 用户头像区域 */
    .user-area {
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.2s;
      will-change: transform;
    }
    
    .avatar:hover {
      transform: scale(1.05);
    }
    
    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 下拉菜单 */
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 5px);
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      min-width: 200px;
      overflow: hidden;
      transform-origin: top right;
      opacity: 0;
      visibility: hidden;
      z-index: 110;
    }
    
    .menu-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: background 0.2s;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .menu-item:hover {
      background: #f8f9fa;
    }
    
    .menu-item i {
      width: 20px;
      text-align: center;
    }
    
    .menu-divider {
      height: 1px;
      background: #eee;
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <!-- SPA布局头部 -->
  <header class="header">
    <div class="logo">LOGO</div>
    
    <div class="user-area">
      <!-- 用户头像 -->
      <div class="avatar" id="avatar">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像">
      </div>
      
      <!-- 下拉菜单 -->
      <div class="dropdown-menu" id="dropdownMenu">
        <div class="menu-item">
          <i>👤</i>
          <span>个人中心</span>
        </div>
        <div class="menu-item">
          <i>⚙️</i>
          <span>账户设置</span>
        </div>
        <div class="menu-divider"></div>
        <div class="menu-item">
          <i>🚪</i>
          <span>退出登录</span>
        </div>
      </div>
    </div>
  </header>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const avatar = document.getElementById('avatar');
      const dropdownMenu = document.getElementById('dropdownMenu');
      let isMenuOpen = false;
      
      // 创建GSAP动画时间线
      const menuAnimation = gsap.timeline({ 
        paused: true,
        defaults: {
          duration: 0.3,
          ease: "power3.out"
        }
      });
      
      // 展开动画
      menuAnimation.fromTo(dropdownMenu, 
        {
          opacity: 0,
          scale: 0.8,
          visibility: "hidden",
          y: -10,
          transformOrigin: "right top"
        },
        {
          opacity: 1,
          scale: 1,
          y: 0,
          visibility: "visible"
        }
      );
      
      // 点击头像切换菜单
      avatar.addEventListener('click', (e) => {
        e.stopPropagation();
        toggleMenu();
      });
      
      // 点击页面其他区域关闭菜单
      document.addEventListener('click', () => {
        if (isMenuOpen) {
          closeMenu();
        }
      });
      
      // 阻止菜单内部点击事件冒泡
      dropdownMenu.addEventListener('click', (e) => {
        e.stopPropagation();
      });
      
      function toggleMenu() {
        if (isMenuOpen) {
          closeMenu();
        } else {
          openMenu();
        }
      }
      
      function openMenu() {
        isMenuOpen = true;
        menuAnimation.play();
      }
      
      function closeMenu() {
        isMenuOpen = false;
        menuAnimation.reverse();
      }
      
      // 响应式处理：小屏幕调整菜单位置
      function handleResponsive() {
        if (window.innerWidth < 768) {
          gsap.set(dropdownMenu, {
            right: 'auto',
            left: '50%',
            transformOrigin: 'center top',
            x: '-50%'
          });
        } else {
          gsap.set(dropdownMenu, {
            right: 0,
            left: 'auto',
            transformOrigin: 'right top',
            x: 0
          });
        }
      }
      
      window.addEventListener('resize', handleResponsive);
      handleResponsive();
    });
  </script>
</body>
</html>
